<template lang="html">
  <div class="global">
    <div class="header">
      <image :mode="withFix" src='http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180607/2018060711002565052.jpg'></image>
      <text class="address">{{address}}</text>
      <text class="this-month">{{'本月用电量(度)：' + thisMonthUsage}}</text>
      <text class="total">总电量(度)：0</text>
      <text class="bigger">{{readValue}}</text>
      <text class="current">当前读数(度)</text>
      <ZanTab v-bind="tab1" :componentId="'tab1'" :handleZanTabChange="handleZanTabChange"/>
    </div>
    <div class="content" v-show="currentTab">
      <div class="title title-one">
        <text>月份</text>
        <text>上月读数</text>
        <text>当前读数</text>
        <text>用量</text>
        <text>金额</text>
      </div>
      <div class="section section-one" v-for="item in monthList" :key="index">
        <text>{{item.month}}</text>
        <text>{{item.last_read_value.read_value}}</text>
        <text>{{item.read_value.read_value}}</text>
        <text>{{item.usage.read_value}}</text>
        <text>{{item.amount}}</text>
      </div>
    </div>
    <div class="content" v-show="!currentTab">
      <div class="title title-two">
        <text>抄表时间</text>
        <text>读数</text>
        <text>用量</text>
      </div>
      <div class="section section-two" v-for="item in dailyList" :key="index">
        <text>{{item.create_date}}</text>
        <text>{{item.read_value}}</text>
        <text>{{item.usage}}</text>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import ZanTab from 'mpvue-zanui/src/components/zan/tab'
import store from '@/store/store'
export default {
  components: {
    ZanTab
  },
  computed: {
    address () {
      return store.state.address
    }
  },
  data () {
    return {
      currentTab: true,
      curType: 1,
      monthList: [],
      dailyList: [],
      thisMonthUsage: 0,
      readValue: '',
      start_year: 0,
      meter_id: 0,
      room_id: 0,
      tab1: {
        list: [
          { id: 0, title: '电表明细' },
          { id: 1, title: '读数明细' }
        ],
        scroll: false,
        selectedId: 0
      }
    }
  },
  onShow () {
    var date = new Date()
    this.start_year = date.getFullYear()
    this.meter_id = this.$root.$mp.query.meterId
    this.room_id = this.$root.$mp.query.roomId
    this.oppropertymeterrecords(1, 1, this.room_id, this.meter_id, 2018)
  },
  methods: {
    ...ZanTab.methods,
    handleZanTabChange (e) {
      const {componentId, selectedId} = e
      this[componentId].selectedId = selectedId
      if (selectedId === 0) {
        this.currentTab = true
        this.curType = 1
      } else {
        this.currentTab = false
        this.curType = 2
      }
      this.oppropertymeterrecords(this.curType, 1, this.room_id, this.meter_id, 2018)
    },
    oppropertymeterrecords (meterRecordsType, meterType, roomId, meterId, startYear) {
      var param = {}
      param['meter_records_type'] = meterRecordsType
      param['meter_type'] = meterType
      param['room_id'] = roomId
      param['meter_id'] = meterId
      param['start_year'] = startYear
      param['count'] = '20'
      param['page'] = '1'
      const ophardwareinfo = api.oppropertymeterrecords(param)
      ophardwareinfo.then(d => {
        if (d.code === 200) {
          if (meterRecordsType === 1) {
            this.monthList = []
            for (let i = d.data.list.length - 1; i >= 0; i--) {
              this.monthList.push(d.data.list[i])
            }
            this.thisMonthUsage = this.monthList[0].usage.read_value
            this.readValue = this.monthList[0].read_value.read_value
          } else {
            console.log('读数明细')
            this.dailyList = []
            for (let i = 0; i < d.data.list.length; i++) {
              if (d.data.list.length <= 1) {
                d.data.list[0]['usage'] = parseFloat(0).toFixed(2)
              } else {
                if (i < d.data.list.length - 2) {
                  d.data.list[i]['usage'] = (parseFloat(d.data.list[i].read_value) - parseFloat(d.data.list[i + 1].read_value)).toFixed(2)
                } else {
                  d.data.list[i]['usage'] = parseFloat(0).toFixed(2)
                }
              }
            }
            this.dailyList = d.data.list
          }
        }
      })
      .catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="css">
  @import './electric_detail.css';
</style>
